<template>
  <div class="yoyo-container mx-auto min-h-screen">
    <!-- 导航栏 -->
    <navBar :title="$t('yoyoCoins.title')"></navBar>

    <!-- Yoyo币余额卡片 -->
    <div class="bg-white mx-4 mt-4 rounded-xl p-4 pb-2 text-center">
      <h3 class="text-lg font-medium text-gray-800 mb-2">{{ $t("yoyoCoins.currentBalance") }}</h3>
      <!-- 余额显示 -->
      <div class="flex items-center justify-center mb-2">
        <img :src="yoyoSrc" class="w-8 h-8 mr-1" alt="" />
        <span class="text-4xl font-bold text-[#ff7a00]">469</span>
      </div>
      <!-- 过期提醒 -->
      <div class="text-sm text-gray-500 mb-4">(xxx{{ $t("yoyoCoins.expireDate") }}2025-08-31{{ $t("yoyoCoins.expireText") }})</div>
      <!-- 统计信息 -->
      <div class="text-left text-sm">
        <div class="flex justify-between items-center py-1">
          <span class="text-gray-600">{{ $t("yoyoCoins.accumulated") }}：</span>
          <span class="font-medium">XXXX</span>
        </div>
        <div class="flex justify-between items-center py-1">
          <span class="text-gray-600">{{ $t("yoyoCoins.used") }}：</span>
          <span class="font-medium">
            XXXX
            <span class="text-sm text-gray-400">({{ $t("yoyoCoins.discountRM") }}XXX)</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="mx-4 mt-4 bg-white rounded-xl overflow-hidden">
      <van-tabs v-model="activeTab" class="yoyo-tabs yoyo-container" sticky offset-top="3rem" >
        <van-tab :title="$t('yoyoCoins.received')" name="received">
          <!-- 已收到记录 -->
          <div class="px-4">
            <div v-for="(record, index) in receivedRecords" :key="index" class="py-4 border-b border-gray-100 last:border-b-0">
              <div class="flex justify-between items-start">
                <div class="flex-1">
                  <div class="font-medium text-gray-800 mb-1">{{ record.title }}</div>
                  <div class="text-sm text-gray-500 mb-1">{{ record.description }}</div>
                  <div class="text-sm text-gray-400">{{ record.date }}</div>
                </div>
                <div class="text-right">
                  <div class="text-lg font-bold text-green-500">+{{ record.amount }}</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab :title="$t('yoyoCoins.usageRecord')" name="usage">
          <!-- 使用记录 -->
          <div class="px-4">
            <div v-for="(record, index) in usageRecords" :key="index" class="py-4 border-b border-gray-100 last:border-b-0">
              <div class="flex justify-between items-start">
                <div class="flex-1">
                  <div class="font-medium text-gray-800 mb-1">{{ record.title }}</div>
                  <div class="text-sm text-gray-500 mb-1">{{ record.description }}</div>
                  <div class="text-sm text-gray-400">{{ record.date }}</div>
                </div>
                <div class="text-right">
                  <div class="text-lg font-bold text-red-500">-{{ record.amount }}</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tabs, Tab } from "vant"
import { getPointRecord } from "@/apis/mine"

export default {
  name: "YoyoCoins",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  data() {
    return {
      activeTab: "received",
      yoyoSrc: require("@/assets/images/yoyo.png"),
      receivedRecords: [
        {
          title: this.$t ? this.$t("yoyoCoins.purchaseEsim") : "购买eSIM/SIM卡",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "2025年5月24日",
          amount: "97",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.purchaseEsim") : "购买eSIM/SIM卡",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "2025年5月22日",
          amount: "34",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.fiveStarReview") : "5星评价",
          description: this.$t ? this.$t("yoyoCoins.systemReward") : "系统自动奖励",
          date: "2025年4月13日",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.completeProfile") : "完善个人资料",
          description: this.$t ? this.$t("yoyoCoins.systemReward") : "系统自动奖励",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.shareApp") : "分享应用",
          description: this.$t ? this.$t("yoyoCoins.systemReward") : "系统自动奖励",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.inviteFriend") : "邀请好友",
          description: this.$t ? this.$t("yoyoCoins.systemReward") : "系统自动奖励",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.useYoyoCoins") : "使用Yoyo币",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "",
          amount: "100",
        },
      ],
      usageRecords: [
        {
          title: this.$t ? this.$t("yoyoCoins.purchaseEsim") : "购买eSIM/SIM卡",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "2025年3月26日",
          amount: "50",
        },
        {
          title: this.$t ? this.$t("yoyoCoins.purchaseEsim") : "购买eSIM/SIM卡",
          description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          date: "2025年1月17日",
          amount: "30",
        },
      ],
    }
  },
  methods: {
    async getPointRecord() {
      try {
        const params = {
          pageNo: 1,
          pageSize: 100,
        }
        const res = await getPointRecord(params)
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    goBack() {
      this.$router.go(-1)
    },
  },
  created() {
    this.getPointRecord()
  },
}
</script>

<style scoped>
/deep/ .van-sticky {
  width: 100%;
}

@media (width >= 40rem) {
  :deep(.van-sticky) {
    max-width: 40rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

@media (width >= 48rem) {
  :deep(.van-sticky) {
    max-width: 48rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

@media (width >= 64rem) {
  :deep(.van-sticky) {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
@media (width >= 80rem) {
  :deep(.van-sticky) {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
@media (width >= 96rem) {
  :deep(.van-sticky) {
    max-width: 72rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
</style>
